<template>
  <div>
    <el-dialog :visible.sync="showPointDialog" :before-close="check" title="选择计费码" :modal-append-to-body="false" width="67%">
      <div class="app-head">
        <el-row>
          <el-col :span="10">
            <div class="watch">
              计费码金额：
              <el-input
                v-model="price"
                size="mini"
                placeholder="请输入计费码名称"
                style="width:200px"
              />
            </div>
          </el-col>

          <el-col :span="10">
            <div class="watch">
              计费码名称：
              <el-input
                v-model="billingCodeName"
                size="mini"
                placeholder="请输入计费码"
                style="width:200px"
              />
            </div>
          </el-col>

          <el-col :span="4">
            <div class="watch">
              <el-button
                v-powerbtn="{power:'business-channelManage-seachCode'}"
                type="primary"
                size="mini"
                round
                @click="getPayListNum"
              >查询</el-button>
              <el-button
                v-powerbtn="{power:'business-channelManage-seachCode'}"
                round
                size="mini"
                @click="reset"
              >重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="addBtns">
        <el-button
          v-powerbtn="{power:'business-channelManage-addCode'}"
          type="primary"
          size="mini"
          round
          icon="el-icon-circle-plus-outline"
          @click="add"
        >新增</el-button>
        <el-upload
          ref="upload"
          :before-upload="beforeUpload"
          style="width:100px !important;display: inline-block"
          action=""
          list-type="text"
          :drag="true"
          :show-file-list="false"
          :limit="1"
          :multiple="false"
          :http-request="uploadFile"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        >
          <el-button
            v-powerbtn="{power:'business-channelManage-addMCode'}"
            size="mini"
            round
            type="primary"
            icon="el-icon-upload2"
          >批量导入</el-button>
        </el-upload>
        <el-button
          v-powerbtn="{power:'business-channelManage-exModelDown'}"
          type="primary"
          size="mini"
          round
          icon="el-icon-download"
          @click="downLoad1"
        >导入文档模板下载</el-button>
      </div>
      <div class="selectTable">
        <el-table
          ref="multipleTable"
          :data="payList"
          border
          highlight-current-row
        >
          <!-- <el-table-column
            label="操作"
            width="55"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" />
            </template>
          </el-table-column> -->
          <el-table-column
            prop="price"
            label="计费码金额"
          />
          <el-table-column
            prop="billingCodeName"
            label="计费码名称"
          />
          <el-table-column
            prop="billingCode"
            label="计费码标识"
          />
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                v-powerbtn="{power:'business-channelManage-editCode'}"
                type="primary"
                style="margin-left:0"
                size="mini"
                round
                plain
                @click="edit(scope.row)"
              >编辑</el-button>
              <!-- v-powerbtn="{power:'business-tactics-find'}" -->
              <el-button
                v-powerbtn="{power:'business-channelManage-delCode'}"
                type="primary"
                style="margin-left:0"
                size="mini"
                round
                plain
                @click="deletePay(scope.row.billingCode, scope.row.billingChannelId)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination :current-page="pageid" :page-sizes="[10,20,30]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- <div class="btnStyles">
          <el-button
            type="primary"
            size="mini"
            round
            @click="verifyConect"
          >确认</el-button>
          <el-button
            type="primary"
            size="mini"
            plain
            round
            @click="check"
          >取消</el-button>
        </div> -->
      </div>
    </el-dialog>
    <add-dia :add-dialog="addDialog" :channel-id="index" @closeDia="closeDia" />
    <edit-dia :edit-dialog="editDialog" :real-obj="obj" :channel-id="index" @closeEdit="closeEdit" />
  </div>
</template>

<script>
import { getPayList, payDelete, payUpload } from '@/api/payChannel.js'
import addDia from './add.vue'
import { download } from '@/utils/download.js'
import editDia from './edit.vue'
import powerbtn from '@/directive/powerbtn/index.js'
export default {
  name: 'Select',
  directives: {
    powerbtn
  },
  components: {
    addDia: addDia,
    editDia: editDia
  },
  props: {
    selectDialog: {
      type: Boolean,
      default: false
    },
    billId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      price: '',
      url: window.bossUrl.API_BCBS + '/paymentChannel/billingCode/billingCodeTemplate/import.do',
      showPointDialog: false, // 遮罩
      addDialog: false,
      loadStatus: false,
      editDialog: false,
      obj: {},
      pageid: 1, // 当前页数
      pagecount: 10, // 每页可显示条数
      count: 0, // 总数量
      payCode: '', // 计费码
      billingCodeName: '', // 计费码名称
      index: '0', // 序号
      billingCodeNum: '', // 计费码查询
      payList: []
    }
  },
  watch: {
    selectDialog(newVal) {
      this.showPointDialog = newVal
      this.index = this.billId
      if (newVal) {
        this.getPayListNum()
      }
    }
  },
  methods: {
    uploadFile(item) {
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      console.log(fileObj)
      form.append('billingChannelId', this.index)
      /* var data = {
        file: form,
        billingChannelId: this.index
      } */
      // this.loadStatus = true
      payUpload(form).then(res => {
        if (res.resultCode === '0000') {
          this.$message({
            type: 'success',
            message: '导入成功'
          })
          this.getPayListNum()
        }
        this.$refs.upload.clearFiles()
      })
    },
    beforeUpload(file) {
      console.log('beforeUpload')
      console.log(file.type)
      const isText = file.type === 'application/vnd.ms-excel'
      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      return (isText | isTextComputer)
    },
    downLoad1() {
      download({}, '/paymentChannel/billingCode/billingCodeTemplate.do', 'PriceCode')
    },
    edit(obj) {
      this.obj = obj
      this.editDialog = true
    },
    closeEdit(val) {
      if (val === true) {
        this.getPayListNum()
      }
      this.editDialog = false
    },
    add() {
      this.addDialog = true
    },
    closeDia(val) {
      if (val === true) {
        this.getPayListNum()
      }
      this.addDialog = false
    },
    // 请求计费码列表
    getPayListNum() {
      this.pageid = 1
      // var that = this
      var data = {
        billingChannelId: this.index,
        price: this.price,
        billingCodeName: this.billingCodeName,
        pageid: 1,
        pagecount: 10
      }
      getPayList(data).then(res => {
        this.payList = res.data.list
        this.count = res.data.count
      })
    },
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.payList.forEach(item => {
        item.checked = false
      })
      this.billingCodeNum = ''
      this.billingCodeName = ''
      this.$emit('closeEdit')
      this.reset()
    },

    handleSelectionChange(row) {
      console.log(row)
      if (row) {
        this.payCode = row.billingCode
        this.payList.forEach(item => {
          if (item.billingCode !== row.billingCode) {
            item.checked = false
          }
        })
      }
    },
    deletePay(billingCode, billingChannelId) {
      const h = this.$createElement
      this.$msgbox({
        title: '消息',
        type: 'warning',
        message: h('p', null, [
          h('span', { style: 'display: inline-block;margin-top: 10px;font-size:14px' }, '确定要删除该计费码吗?'),
          h('i', { style: 'color: red;display:block;font-size:10px;' }, '删除计费码可能导致已经使用该计费码的产品无法订购。请谨慎删除。')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            var data = {
              billingCode: billingCode,
              billingChannelId: billingChannelId
            }
            payDelete(data).then(res => {
              if (res.resultCode === '0000') {
                this.$message({
                  type: 'success',
                  message: '删除成功 '
                })
                done()
                this.getPayListNum()
              }
            })
          } else {
            done()
          }
        }
      }).then(action => {
        this.getPayListNum()
      })
      /* this.$confirm('确定要删除该计费码吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          billingCode: billingCode,
          billingChannelId: billingChannelId
        }
        payDelete(data).then(res => {
          if (res.resultCode === '0000') {
            this.$message({
              type: 'success',
              message: '删除成功 '
            })
            this.getPayListNum()
          }
        })
      }) */
    },
    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        billingChannelId: this.index,
        price: this.price,
        billingCodeName: this.billingCodeName,
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getPayList(request).then(res => {
        this.payList = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      })
    },
    reset() {
      this.billingChannelId = ''
      this.price = ''
      this.billingCodeName = ''
    },
    // 跳转某页
    handleCurrentChange(num) {
      this.pageid = num // 当前页数
      console.log(num)
      const request = {
        billingChannelId: this.index,
        price: this.price,
        billingCodeName: this.billingCodeName,
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getPayList(request).then(response => {
        this.payList = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },

    // 确认关联
    verifyConect() {
      let payCode
      var allResult = []
      for (const i in this.payList) {
        allResult.push(this.payList[i].checked)
      }
      console.log(allResult)
      if (allResult.indexOf(true) < 0) {
        payCode = ''
      } else {
        payCode = this.payCode
      }
      this.showPointDialog = false
      this.$emit('closeSelect', payCode, this.index)
    }
  }
}
</script>

<style scoped>

.addBtns{
  margin: 5px 5px;
  display: flex;
  height:25px;
}
.el-checkbox__inner{
  border-radius: 50% !important;
}
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.selectTable{
  margin-top: 10px;
  position: relative;
}
.app-head{
  margin-top: -20px;
  position: relative;
}
.el-pagination{
  justify-content: flex-start !important;
}
.pagination-container{
  margin-left: 20px !important;
  margin-bottom: -5px !important;
}
.btnStyles{
  position: absolute;
  right: 0;
  bottom: -5px;
}
</style>
<style>
.el-upload-dragger{
  width: 100px !important;
  height: 27px !important;
}
.el-upload-dragger{
  border: none;
}
</style>
